<template>
  <div>
    <el-alert
      :title="`数据一共${page.total}条`"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="number" label="试题编号" width="150">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="120"
        :formatter="formatQuestionType"
      >
      </el-table-column>
      <el-table-column prop="question" label="题干" width="300">
        <template slot-scope="scope">
          <div v-html="scope.row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="200">
        <template v-slot="{ row }">
          {{ row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}") }}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="120"
        :formatter="formatQuestionDifficulty"
      >
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="120"
        :formatter="formatQuestionChkType"
      >
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="120">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120">
      </el-table-column>
      <el-table-column
        prop="publishState"
        label="发布状态"
        width="120"
        :formatter="formatQuestionPublishType"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240" align="center">
        <template slot-scope="scope">
          <el-button @click="preview(scope.row)" type="text" size="small">
            预览
          </el-button>
          <el-button
            @click="check(scope.row)"
            type="text"
            size="small"
            :disabled="scope.row.chkState === 2 ? true : false"
          >
            审核
          </el-button>
          <el-button
            @click="
              $router.push({
                path: '/questions/new',
                query: { id: scope.row.id }
              })
            "
            type="text"
            size="small"
            :disabled="scope.row.publishState === 1 ? true : false"
          >
            修改
          </el-button>
          <el-button
            v-if="scope.row.publishState === 1"
            @click="publish(scope.row)"
            type="text"
            size="small"
          >
            下架
          </el-button>
          <el-button
            v-else
            @click="publish(scope.row)"
            type="text"
            size="small"
          >
            上架
          </el-button>
          <el-button
            @click="del(scope.row)"
            type="text"
            size="small"
            :disabled="scope.row.publishState === 1 ? true : false"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="题目预览"
      :visible.sync="previewDialogVisible"
      width="60%"
      :before-close="previewClose"
    >
      <el-row :gutter="20">
        <el-col :span="6"
          ><div class="grid-content ">
            【题型】：{{ previewData.questionType | filtype }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content ">
            【编号】：{{ previewData.id }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content ">
            【难度】：{{ previewData.difficulty | fildifficulty }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content ">
            【标签】：{{ previewData.tags }}
          </div></el-col
        >
      </el-row>
      <el-row :gutter="20" style="border-bottom:1px solid #000">
        <el-col :span="6"
          ><div class="grid-content ">
            【学科】：{{ previewData.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content ">
            【目录】：{{ previewData.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="grid-content ">
            【方向】：{{ previewData.direction }}
          </div></el-col
        >
      </el-row>
      <el-row
        v-if="previewData.questionType === '1'"
        style="border-bottom:1px solid #000"
        ><span>【题干】:</span>
        <div v-html="previewData.question" style="margin:15px 0"></div>

        <div>单选题 选项：（以下选中的选项为正确答案）</div>
        <el-radio-group v-model="isRight" class="questionType">
          <el-radio
            :label="item.isRight"
            v-for="item in previewData.options"
            :key="item.id"
            >{{ item.title }}</el-radio
          >
        </el-radio-group>
      </el-row>
      <el-row
        v-else-if="previewData.questionType === '2'"
        style="border-bottom:1px solid #000"
        ><span>【题干】:</span>
        <div v-html="previewData.question" style="margin:15px 0"></div>

        <div>多选题 选项：（以下选中的选项为正确答案）</div>
        <el-checkbox-group v-model="checkList" class="questionType">
          <el-checkbox
            :label="item.isRight"
            v-for="item in previewData.options"
            :key="item.id"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group>
      </el-row>
      <el-row v-else style="border-bottom:1px solid #000"
        ><span>【题干】:</span>
        <div v-html="previewData.question" style="margin:15px 0"></div>
      </el-row>

      <el-row style="border-bottom:1px solid #000">
        【参考答案】：<el-button type="danger" size="small" @click="videoPlay"
          >视频答案预览</el-button
        >

        <video
          v-if="videoVisible"
          controls
          id="myVideo"
          class="video-js"
          ref="myVideo"
          style="width:400px;height:225px"
        >
          <source :src="previewData.videoURL" type="video/mp4" />
        </video>
      </el-row>
      <el-row style="border-bottom:1px solid #000" type="flex" justify="star">
        【答案解析】： <span v-html="previewData.answer"></span>
      </el-row>
      <el-row>
        【题目备注】：
        <span>{{ previewData.remarks }}</span>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewClose" size="small"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="题目审核"
      :visible.sync="checkVisible"
      width="30%"
      :before-close="checkVisibleClose"
    >
      <el-radio v-model="chkType" label="2" style="margin-right:15px"
        >通过</el-radio
      >
      <el-radio v-model="chkType" label="3">拒绝</el-radio>
      <el-form>
        <el-form-item>
          <el-input type="textarea" v-model="checkOpinion"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="checkVisible = false">取 消</el-button>
        <el-button type="primary" @click="checkbtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as Constants from "@/api/hmmm/constants";
import {
  detail,
  choiceCheck,
  choice,
  choicePublish,
  remove
} from "@/api/hmmm/questions";
import { readdir } from "fs";

import "video.js/dist/video-js.css";
export default {
  name: "QuestionsChoiceTab",
  filters: {
    filtype(val) {
      const f = Constants.questionType.find(item => {
        item.value === val;
        return item;
      });
      return f.label;
    },
    fildifficulty(val) {
      const f = Constants.difficulty.find(item => {
        item.value === val;
        return item;
      });
      return f.label;
    }
  },
  components: {},
  props: {
    tableData: {
      type: Array,
      required: true
    },
    page: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      previewDialogVisible: false,
      previewData: [],
      form: {},
      isRight: 1,
      checkList: [1],
      videoVisible: false,
      checkVisible: false,
      checkOpinion: "",
      chkType: "3",
      chkID: 0
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.initVideo;
    }, 300);
  },
  computed: {},
  methods: {
    formatQuestionType(row, column, cellValue, index) {
      let f = Constants.questionType.find(item => item.value == cellValue);
      return f ? f.label : "";
    },
    formatQuestionDifficulty(row, column, cellValue, index) {
      let f = Constants.difficulty.find(item => item.value == cellValue);
      return f ? f.label : "";
    },
    formatQuestionChkType(row, column, cellValue, index) {
      let f = Constants.chkType.find(item => item.value == cellValue);
      return f ? f.label : "";
    },
    formatQuestionPublishType(row, column, cellValue, index) {
      let f = Constants.publishType.find(item => item.value == cellValue);
      return f ? f.label : "";
    },
    async preview(val) {
      // console.log(val);
      this.previewDialogVisible = true;
      const { data } = await detail({ id: val.id });
      console.log(data);

      this.previewData = data;
    },
    previewClose() {
      this.previewDialogVisible = false;
      this.videoVisible = false;
      this.$refs.myVideo.pause();
      this.$refs.myVideo.load();
    },
    videoPlay(val) {
      this.videoVisible = true;
    },
    checkVisibleClose() {
      this.checkVisible = false;
    },
    check(val) {
      this.checkVisible = true;
      this.chkID = val.id;
    },
    async checkbtn() {
      if (this.checkOpinion.trim() === "") {
        this.$message.warning("请输入审核意见");
      }
      await choiceCheck({
        id: this.chkID,
        chkState: Number(this.chkType),
        chkRemarks: this.checkOpinion
      });
      await this.$emit("getFatherData");
      this.$message.success("操作成功");
    },
    publish(data) {
      if (data.publishState === 1) {
        this.$confirm("您确认下架这道题目吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            await choicePublish({ id: data.id, publishState: 0 });
            await this.$emit("getFatherData");
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          })
          .catch(() => {});
      } else {
        this.$confirm("您确认上架架这道题目吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            await choicePublish({ id: data.id, publishState: 1 });
            await this.$emit("getFatherData");

            this.$message({
              type: "success",
              message: "操作成功!"
            });
          })
          .catch(() => {});
      }
    },
    del(data) {
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          await remove({ id: data.id });
          await this.$emit("getFatherData");
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {});
    },
    initVideo() {
      // 初始化视频方法
      const myPlayer = this.$video("myVideo", {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,

        // 自动播放属性,muted:静音播放,并且从视频加载完成后就开始播放
        autoplay: "autoplay",

        // 建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",

        // 设置视频播放器的显示宽度（以像素为单位,也可以使用%）
        width: "400px",

        // 设置视频播放器的显示高度（以像素为单位,也可以使用%）
        height: "225px",

        // 设置视频的封面
        poster: require("@/assets/logo.png")
      });
    }
  }
};
</script>

<style lang="less" scoped>
.el-row {
  padding: 15px 0;
}
/deep/ p {
  margin: 0;
  padding: 0;
}
.questionType {
  display: flex;
  flex-direction: column;
}
.el-radio {
  margin: 5px 0;
}
.el-checkbox {
  margin: 5px 0;
}
/deep/ .vjs-custom-skin {
  width: 400px;
  height: 225px;
}
</style>